<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->

    <div class="filter-container" style="display: flex">
      <el-form ref="listQuery" :model="listQuery" status-icon label-position="right"
               label-width="100px" style="display: flex">
        <el-form-item label="起始日期" prop="startDate">
          <el-date-picker
            v-model="listQuery.startTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker
            v-model="listQuery.endTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="doQuery" icon="el-icon-search">查询</el-button>
      </div>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">

      <el-table-column align="center" min-width="110" label="保险公司名称" prop="suranceName"/>
      <el-table-column align="center" min-width="160" label="保代/权益服务商名称" prop="agentName"/>
      <el-table-column align="center" min-width="110" label="保理公司名称" prop="factoringName"/>
      <el-table-column align="center" min-width="120" label="共管账户号" prop="account"/>
      <el-table-column align="center" min-width="120" label="共管账户名称" prop="accName"/>
      <el-table-column align="center" min-width="150" label="共管账户开户银行名称" prop="interBankName"/>
     <!-- <el-table-column align="center" min-width="200" label="共管账户联行号" prop="interBankNo"/>-->
      <el-table-column align="center" min-width="200" label="共管账户号" prop="account"/>
      <el-table-column align="center" min-width="200" label="共管账户名称" prop="accName"/>
      <!--<el-table-column align="center" min-width="200" label="共管账户联行号" prop="interBankNo"/>-->
      <el-table-column fixed="right" align="center" label="操作" width="300" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" size="mini"
                     @click="handleBalance(scope.row)">当前余额
          </el-button>
          <el-button type="primary" size="mini"
                     @click="bankForward(scope.row)">银行流水
          </el-button>
          <el-button type="danger" size="mini"
                     @click="platForward(scope.row)">业务操作记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>
    <!-- 余额对话框 -->
    <el-dialog :visible.sync="acclistDialogVisible" title="当前余额"  width="900px" :close-on-click-modal="false">
      <el-table v-loading="acclistLoading" :data="acclist" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#92D3FF',color:'#fff'}">
        <el-table-column fixed align="center" max-width="300" label="账户号" prop="account"/>
        <el-table-column align="center" min-width="100" label="当前余额(元)" prop="balance"/>
      </el-table>
      <!--明细对话框-->
    </el-dialog>
  </div>
</template>

<script>
    import {doGet, doPost} from '@/api'
    import {cities} from '@/utils/base'
    import {parseTime} from '@/utils'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    import checkPermission from '@/utils/permission' // 权限判断函数

    export default {
        name: 'correlation',
        components: {Pagination},
        filters: { },
        data() {
            return {
                list: [],
                total: 0,
                listLoading: true,
                listQuery: {
                    page: 1,
                    pageSize: 20,
                    startTime: undefined,
                    endTime: undefined
                },
                dialogStatus: 'create',
                acclistDialogVisible: false, // 账户列表对话框显示标志
                acclistLoading: false, // 查看账户列表loading标志
                acclist: [], // 账户列表数据
                id: undefined,
                account: undefined, // 指定账户号
            }
        },
        created() {
            this.getList()
        },
        methods: {
            checkPermission,
            // 获取三方关联列表
            getList() {
                this.listLoading = true
                doGet('accsearch.html?op=acclist', this.listQuery).then(response => {
                    this.list = response.rows
                    this.total = response.data.totalcount
                    this.listLoading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
            },
            // 获取余额列表
            getAccList(account) {
                this.acclistLoading = true
                doGet('balance.html?op=search', {account}).then(response => {
                    this.acclist = response.rows
                    this.acclistLoading = false
                }).catch(response => {
                    this.acclist = []
                    this.acclistLoading = false
                    this.$notify.error({
                        title: '失败',
                        message: response.message
                    })
                })
            },
            // 弹出余额对话框
            handleBalance(row) {
                this.acclist = []
                this.acclistDialogVisible = true
                this.getAccList(row.account)
            },
            // 查询
            doQuery() {
               this.getList()
            },
            /**银行流水 */
            bankForward(row) {
                this.$router.push({ path: '/bankserial', query: { account: row.account }})
            },
            /**业务操作记录*/
            platForward(row) {
                this.$router.push({ path: '/platformserial', query: { account: row.account }})
            }
        }
    }
</script>
